<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>点歌台</title>

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script>
  <script src="./book.js?v=2019-9-23 17:43:28"></script>
  <style type="text/css">
    .middle-top {
      z-index: 999;
      position: fixed;
      left: 50%;
      top: 50px;
      transform: translate(-50%, -50%);
    }

    a {
      cursor: pointer;
    }

    input::-webkit-inner-spin-button {
      display: none;
    }
  </style>
</head>

<body style="padding: 20px;" ng-app="music" ng-controller="bookCtrl">
  <!-- 提示 -->
  <div class="middle-top alert {{msg.type}}" role="alert" ng-if="msg.content">
    <span ng-bind="msg.content"></span>
  </div>
  <!-- 播放 -->
  <audio ng-src="{{player.src}}">
    这个浏览器没法听歌。
  </audio>
  <div class="page-header">
    <h1>点歌台</h1>
  </div>
  <div class="row">
    <!-- 搜索 -->
    <div class="col-sm-6">
      <div class="panel panel-primary">
        <div class="panel-heading">搜索 (网易云)</div>
        <div class="panel-body">
          <!-- 搜索栏 -->
          <form ng-submit="search(searchText)">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="输入搜索内容..." ng-model="searchText">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">搜索</button>
              </span>
            </div>
          </form>
          <!-- 歌曲 -->
          <table class="table table-striped table-hover" ng-if="searchData.songCount" style="margin-bottom: 0;">
            <thead>
              <tr>
                <th>标题</th>
                <th>歌手</th>
                <th>时长</th>
                <th ng-if="bookParams.bookDate >= today">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="song in searchData.songs">
                <td><a ng-bind="song.name" ng-click="play(song)"></a></td>
                <td ng-bind="song.artistNames"></td>
                <td ng-bind="song.durationText"></td>
                <td ng-if="bookParams.bookDate >= today">
                  <a ng-click="book(song)">点歌</a>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <nav aria-label="Page navigation" ng-if="pagination.maxPage > 1">
            <ul class="pagination">
              <li ng-class="{'disabled': pagination.page === 1}">
                <a aria-label="Previous" ng-click="prevPage()">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li ng-repeat="p in pagination.pages" ng-class="{'active': p === pagination.page}">
                <a ng-bind="p" ng-click="gotoPage(p)"></a>
              </li>
              <li ng-class="{'disabled': pagination.page === pagination.maxPage}">
                <a aria-label="Next" ng-click="nextPage()">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

    <!-- 点歌 -->
    <div class="col-sm-6">
      <div class="panel panel-primary">
        <div class="panel-heading">点歌 ({{bookData.songs.length}}/{{bookParams.bookLimit}})</div>
        <div class="panel-body">
          <!-- 日期栏 -->
          <form>
            <div class="input-group">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="prevBook()">&lt;</button>
              </span>
              <input type="date" class="form-control" ng-model="bookParams.bookDate"
                ng-change="gotoBook(bookParams.bookDate)" required>
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="nextBook()">&gt;</button>
              </span>
            </div>
          </form>
          <!-- 歌曲 -->
          <table class="table table-striped table-hover" ng-if="bookData.songs.length" style="margin-bottom: 0;">
            <thead>
              <tr>
                <th ng-if="bookParams.bookDate >= today">操作</th>
                <th>标题</th>
                <th>歌手</th>
                <th>时长</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="song in bookData.songs">
                <td ng-if="bookParams.bookDate >= today">
                  <a ng-click="unbook(song)">取消</a>
                </td>
                <td><a ng-bind="song.name" ng-click="play(song)"></a></td>
                <td ng-bind="song.artistNames"></td>
                <td ng-bind="song.durationText"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

</html>